<template>
  <nav class="bg-[#FF4400] text-white">
    <!-- 顶部导航 -->
    <div class="bg-[#333] text-xs py-1">
      <div class="container mx-auto flex justify-end space-x-4">
        <a href="#" class="text-gray-300 hover:text-white">请登录</a>
        <a href="#" class="text-gray-300 hover:text-white">免费注册</a>
        <a href="#" class="text-gray-300 hover:text-white">我的订单</a>
      </div>
    </div>
    
    <!-- 主导航 -->
    <div class="container mx-auto py-4 px-4">
      <div class="flex justify-between items-center">
        <router-link to="/" class="text-2xl font-bold">淘商城</router-link>
        
        <!-- 搜索框 -->
        <div class="flex-1 max-w-2xl mx-8">
          <div class="flex">
            <input type="text" 
                   placeholder="请输入搜索关键词" 
                   class="w-full px-4 py-2 text-gray-900 rounded-l-lg focus:outline-none">
            <button class="bg-[#FF4400] text-white px-6 py-2 rounded-r-lg hover:bg-[#F22D00]">
              搜索
            </button>
          </div>
        </div>
        
        <!-- 购物车 -->
        <router-link to="/cart" 
                     class="flex items-center space-x-2 bg-[#FF6A00] px-4 py-2 rounded hover:bg-[#F22D00]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
          <span>购物车({{ cartStore.totalItems }})</span>
        </router-link>
      </div>
      
      <!-- 分类导航 -->
      <div class="flex space-x-8 mt-4 text-sm">
        <router-link to="/products" class="hover:text-yellow-200">全部商品</router-link>
        <a href="#" class="hover:text-yellow-200">天猫新品</a>
        <a href="#" class="hover:text-yellow-200">今日特卖</a>
        <a href="#" class="hover:text-yellow-200">品牌闪购</a>
        <a href="#" class="hover:text-yellow-200">拍卖</a>
        <a href="#" class="hover:text-yellow-200">进口好物</a>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { useCartStore } from '../store/cartStore'

const cartStore = useCartStore()
</script> 